<template>
  <view class="page">
    <div class="page-content">
      <div class="my-fishlist">
        <div class="search-box">
          <u-tabs :list="list" item-width="120" :is-scroll="false" :current="current" @change="change" active-color="rgb(254, 129, 5)"></u-tabs>
        </div>
        <div class="my-fishlist-item" v-for="item in myFishList">
          <div class="my-fishlist-item-header">
            <u-section :title="item.month" :right="false" :font-size="32" color="rgb(254, 129, 5)"></u-section>
            <div class="status" style="color: #ee0a0a">{{ item.amount }}</div>
          </div>
          <div class="cell-list">
            <u-row gutter="12">
              <u-col :span="cell.col" v-for="cell in cellList">
                <div class="cell-item">
                  <span class="label">{{ cell.name}}</span>：{{ item[cell.key] }}
                </div>
              </u-col>
            </u-row>
          </div>
        </div>
      </div>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: '月度统计'
        },
        {
          name: '年度统计'
        },
      ],
      current: 0,
      cellList: [
        {
          name: '出勤次数',
          value: 10,
          col: '6',
          key: 'attendance'
        },
        {
          // 花费
          name: '花费',
          value: 20,
          col: '6',
          key: 'cost'
        },
        {
          // 中鱼天数
          name: '中鱼天数',
          value: 30,
          col: '6',
          key: 'catch'
        },
        {
          name: '打龟次数',
          value: 40,
          col: '6',
          key: 'turtle'
        },
        {
          name: '放流次数',
          value: 50,
          col: '6',
          key: 'release'
        },
        {
          name: '打龟率',
          value: '20%',
          col: '6',
          key: 'turtle_rate'
        },
        {
          name:"鱼获次数",
          value: 60,
          col: '6',
          key: 'fish'
        },
        {
          name: '去年同期',
          value: 70,
          col: '6',
          key: 'last_year'
        },
        {
          name: '鱼获概览',
          value: '草鱼x10，鲫鱼x20，鲤鱼x30',
          col: '12',
          key: 'fish_overview'
        },
        // {
        //   name: '最大中鱼天数间隔',
        //   value: '10天（2024-01-01~2024-01-11）',
        //   col: '12',
        //   key: 'max_catch'
        // },
        // {
        //   name: '最大连龟',
        //   value: '5次（2024-01-01~2024-01-11）',
        //   col: '12',
        //   key: 'max_turtle'
        // }
      ],
      myFishList: [
        {
          attendance: 10,
          cost: 20,
          catch: 30,
          turtle: 40,
          release: 50,
          turtle_rate: '20%',
          fish: 60,
          last_year: 70,
          fish_overview: '草鱼x10，鲫鱼x20，鲤鱼x30',
          max_catch: '10天（2024-01-01~2024-01-11）',
          max_turtle: '5次（2024-01-01~2024-01-11）',
          name: '2024-01'
        }
      ]
    }
  },
  onShow() {
    this.getList()
  },
  methods: {
    change(e) {
      this.current = e
      this.getList()
    },
    getList() {
      if (!this.$store.state.userInfo.id) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        return
      }
      uni.showLoading({
        title: '加载中'
      })
      this.$api.getTotal({
        member_id: this.$store.state.userInfo.id,
        dateType: this.current === 0 ? 'month' : 'year'
      }).then(res => {
        uni.hideLoading()
        this.myFishList = res
      }).catch(() => {
        uni.hideLoading()
      })
    },
  }
}
</script>

<style lang="scss">
.page-content {
  padding: 20rpx;
}
.my-fishlist {

  .search-box {
    background-color: #ffffff;
    padding: 10rpx 20rpx;
    margin-bottom: 20rpx;
  }
  .my-fishlist-item {
    border-radius: 14rpx;
    overflow: hidden;
    background-color: #fff;
    margin-bottom: 20rpx;
    .item-button-box {
      margin: 20rpx;
      display: flex;
      align-items: center;justify-content: flex-end;
      .item-button {
        padding: 10rpx 60rpx;
        border: 1px solid rgb(254, 129, 5);
        text-align: center;
        line-height: 40rpx;
        font-size: 24rpx;
        color: rgb(254, 129, 5);
        border-radius: 14rpx;
      }
    }
    .item-image {
      padding: 0 20rpx;
    }
    .cell-list {
      padding:0 20rpx 20rpx;
      .cell-item {
        .label {
          color: #999999;
          font-size: 28rpx;
        }
        padding: 10rpx 0;
        font-size: 28rpx;
        color: #333333;
      }
    }
    .my-fishlist-item-header-desc {
      padding: 10rpx 20rpx;
      font-size: 28rpx;
      color: #666;
      border-bottom: 1px solid #f0f0f0;
    }
    .my-fishlist-item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx;
      .status {
        color: #333333;
        font-weight: bold;
        flex-shrink: 0;
      }
    }
  }
}
</style>
